﻿@page "/components/grid"

<DocsPage>
    <DocsPageHeader Title="Grid" SubTitle="The grid component helps keeping layout consistent across various screen resolutions and sizes.">
        <Description>            
            MudBlazor comes with a 12-point grid system and contains 5 types of breakpoints that are used for specific screen sizes.<br /><br />
            Read more about <MudLink Href="/features/breakpoints">MudBlazor's breakpoints here.</MudLink>
        </Description>
    </DocsPageHeader>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Spacing">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true" Class="demo-grid-spacing">
                <GridSpacingExample />
            </SectionContent>
            <SectionSource Code="GridSpacingExample" ShowCode="false" GitHubFolderName="Grid" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Basic grid">
                <Description>The column widths apply at all breakpoints, xs and up.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true" Class="demo-grid-basic">
                <GridBasicExample />
            </SectionContent>
            <SectionSource Code="GridBasicExample" ShowCode="false" GitHubFolderName="Grid"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Grid with breakpoints">
                <Description>You can apply multiple column widths, causing the layout to change at the specific break point.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true" Class="demo-grid-basic">
                <GridWithBreakpointsExample />
            </SectionContent>
            <SectionSource Code="GridWithBreakpointsExample" ShowCode="false" GitHubFolderName="Grid" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
